<template>
	<div>
		<el-container>
			<el-aside width="200px">
				<LxlMenu />
			</el-aside>
			<el-container>
				<el-header>
					<h3>欢迎来到清华大学后台管理系统</h3>
				</el-header>
				<el-main>
					<router-view/>
				</el-main>
				<el-footer>
					<h3>作者：Marion</h3>
				</el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import LxlMenu from '@/components/menu'
export default {
	name: 'Index',
	created() {
		console.log(this.$store.getters.GET_TOKEN)
	},
	components: {
		LxlMenu
	},
	data () {
		return {
			message: '这里是首页组件'
		}
	}
}
</script>

<!-- scoped 表示只对当前组件class生效 别的不生效 -->
<style scoped lang="less">
// 选了css预编译 可以在css里面定义变量
@lxlborder: 1px solid #cccccc;
@lxlheight: 60px;
.el-container {
	/* vh表示以浏览器为参考高度 */
	height: 100vh; 
	.el-aside {
		border-right: @lxlborder;
		overflow-x: hidden;
	}
	.el-header {
		border-bottom: @lxlborder;
		// h3 {
		// 	line-height: @lxlheight;
		// }
	}
	.el-footer {
		border-top: @lxlborder;
	}
	h3 {
		line-height: @lxlheight;
	}
}
/* .el-container .el-aside {
	子标签选择器 简化写法 加上lang=“less” 子元素直接写在父元素下面
} */
</style>
